<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提交反馈 - 售后管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            font-size: 24px;
        }

        .back-btn {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }

        .feedback-card {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .feedback-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .feedback-title {
            font-size: 24px;
            color: #333;
            margin-bottom: 10px;
        }

        .feedback-subtitle {
            color: #666;
            font-size: 14px;
        }

        .application-info {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
        }

        .info-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .info-label {
            font-weight: 500;
            color: #666;
        }

        .info-value {
            color: #333;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
        }

        .rating-container {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }

        .rating-star {
            font-size: 24px;
            color: #ddd;
            cursor: pointer;
            transition: color 0.2s ease;
        }

        .rating-star:hover,
        .rating-star.active {
            color: #ffc107;
        }

        .rating-text {
            margin-top: 10px;
            font-size: 14px;
            color: #666;
        }

        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e1e5e9;
            border-radius: 5px;
            font-size: 16px;
            resize: vertical;
            min-height: 120px;
            font-family: inherit;
        }

        .form-group textarea:focus {
            outline: none;
            border-color: #667eea;
        }

        .submit-btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .submit-btn:hover {
            transform: translateY(-2px);
        }

        .submit-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .error-message {
            color: #e74c3c;
            font-size: 14px;
            margin-top: 10px;
            text-align: center;
            display: none;
        }

        .success-message {
            color: #27ae60;
            font-size: 14px;
            margin-top: 10px;
            text-align: center;
            display: none;
        }

        .loading {
            display: none;
            text-align: center;
            margin-top: 10px;
        }

        .spinner {
            border: 2px solid #f3f3f3;
            border-top: 2px solid #667eea;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
            display: inline-block;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .error-message {
            color: #e74c3c;
            text-align: center;
            padding: 20px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>提交反馈</h1>
        <a href="/after_sale_system/page/consumer/applicationList" class="back-btn">返回列表</a>
    </div>

    <div class="container">
        <div id="feedbackContainer">
            <div class="loading">
                <div class="spinner"></div>
                <p>加载中...</p>
            </div>
        </div>
    </div>

    <script>
        let applicationId = null;
        let selectedRating = 0;

        // 获取URL参数
        function getUrlParameter(name) {
            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.search);
            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
        }

        // 页面加载时初始化
        window.addEventListener('load', function() {
            applicationId = getUrlParameter('id');
            if (applicationId) {
                loadApplicationInfo();
            } else {
                showError('缺少申请ID参数');
            }
        });

        // 加载申请信息
        function loadApplicationInfo() {
            fetch(`/after_sale_system/api/afterSale/${applicationId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        displayFeedbackForm(data.data);
                    } else {
                        showError('获取申请信息失败: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('获取申请信息失败:', error);
                    showError('获取申请信息失败，请稍后重试');
                });
        }

        // 显示反馈表单
        function displayFeedbackForm(application) {
            const container = document.getElementById('feedbackContainer');
            
            container.innerHTML = `
                <div class="feedback-card">
                    <div class="feedback-header">
                        <div class="feedback-title">服务满意度评价</div>
                        <div class="feedback-subtitle">请对本次售后服务进行评价</div>
                    </div>

                    <div class="application-info">
                        <div class="info-item">
                            <span class="info-label">申请编号:</span>
                            <span class="info-value">${application.id}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">申请类型:</span>
                            <span class="info-value">${getTypeText(application.afterSaleType)}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">商品名称:</span>
                            <span class="info-value">${application.productName || 'N/A'}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">完成时间:</span>
                            <span class="info-value">${formatDate(application.handleTime) || 'N/A'}</span>
                        </div>
                    </div>

                    <form id="feedbackForm">
                        <div class="form-group">
                            <label>服务满意度评分</label>
                            <div class="rating-container">
                                <span class="rating-star" data-rating="1" onclick="setRating(1)">★</span>
                                <span class="rating-star" data-rating="2" onclick="setRating(2)">★</span>
                                <span class="rating-star" data-rating="3" onclick="setRating(3)">★</span>
                                <span class="rating-star" data-rating="4" onclick="setRating(4)">★</span>
                                <span class="rating-star" data-rating="5" onclick="setRating(5)">★</span>
                            </div>
                            <div class="rating-text" id="ratingText">请选择评分</div>
                        </div>

                        <div class="form-group">
                            <label for="feedback">详细反馈</label>
                            <textarea 
                                id="feedback" 
                                name="feedback" 
                                placeholder="请详细描述您对本次售后服务的感受和建议..."
                                required
                            ></textarea>
                        </div>

                        <button type="submit" class="submit-btn" id="submitBtn">提交反馈</button>
                    </form>

                    <div class="error-message" id="errorMessage"></div>
                    <div class="success-message" id="successMessage"></div>
                    <div class="loading" id="loading">
                        <div class="spinner"></div>
                        <span>提交中...</span>
                    </div>
                </div>
            `;

            // 绑定表单提交事件
            document.getElementById('feedbackForm').addEventListener('submit', function(e) {
                e.preventDefault();
                submitFeedback();
            });
        }

        // 设置评分
        function setRating(rating) {
            selectedRating = rating;
            
            // 更新星星显示
            const stars = document.querySelectorAll('.rating-star');
            stars.forEach((star, index) => {
                if (index < rating) {
                    star.classList.add('active');
                } else {
                    star.classList.remove('active');
                }
            });

            // 更新评分文本
            const ratingText = document.getElementById('ratingText');
            const ratingDescriptions = {
                1: '非常不满意',
                2: '不满意',
                3: '一般',
                4: '满意',
                5: '非常满意'
            };
            ratingText.textContent = ratingDescriptions[rating] || '请选择评分';
        }

        // 提交反馈
        function submitFeedback() {
            if (selectedRating === 0) {
                showError('请选择满意度评分');
                return;
            }

            const feedback = document.getElementById('feedback').value.trim();
            if (!feedback) {
                showError('请填写详细反馈');
                return;
            }

            const submitBtn = document.getElementById('submitBtn');
            submitBtn.disabled = true;
            submitBtn.textContent = '提交中...';

            const feedbackData = {
                applicationId: applicationId,
                satisfaction: selectedRating,
                feedback: feedback
            };

            fetch('/after_sale_system/api/feedback/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(feedbackData)
            })
            .then(response => response.json())
            .then(data => {
                submitBtn.disabled = false;
                submitBtn.textContent = '提交反馈';

                if (data.success) {
                    showSuccess('反馈提交成功！感谢您的评价');
                    setTimeout(() => {
                        window.location.href = '/after_sale_system/page/consumer/applicationList';
                    }, 2000);
                } else {
                    showError(data.message || '提交失败');
                }
            })
            .catch(error => {
                submitBtn.disabled = false;
                submitBtn.textContent = '提交反馈';
                console.error('提交反馈失败:', error);
                showError('提交失败，请稍后重试');
            });
        }

        // 获取类型文本
        function getTypeText(type) {
            const typeMap = {
                'RETURN': '退货',
                'EXCHANGE': '换货',
                'REPAIR': '维修'
            };
            return typeMap[type] || type;
        }

        // 格式化日期
        function formatDate(dateString) {
            if (!dateString) return 'N/A';
            const date = new Date(dateString);
            return date.toLocaleString('zh-CN');
        }

        function showError(message) {
            const errorElement = document.getElementById('errorMessage');
            errorElement.textContent = message;
            errorElement.style.display = 'block';
        }

        function hideError() {
            document.getElementById('errorMessage').style.display = 'none';
        }

        function showSuccess(message) {
            const successElement = document.getElementById('successMessage');
            successElement.textContent = message;
            successElement.style.display = 'block';
        }

        function hideSuccess() {
            document.getElementById('successMessage').style.display = 'none';
        }

        function showLoading() {
            document.getElementById('loading').style.display = 'block';
        }

        function hideLoading() {
            document.getElementById('loading').style.display = 'none';
        }
    </script>
</body>
</html> 